<script setup>
import {onBeforeMount, ref} from "vue";
import {getForUser} from "@/api/api";
import ResultAdder from "@/components/form/resultAdder.vue";
import ResDetail from "@/components/components/resDetail.vue";
const list = ref([])

onBeforeMount(() => {
  getForUser().then(res => {
    list.value = res.data.data;
    console.log(res.data.data)
  })
})

</script>

<template>
<body class="main">
  <div>
    <result-adder style="justify-items: left"></result-adder>
  </div>
  <div class="left" >
    <div v-if="list.length ===0">
      <h1 style="color: white">暂时没有填报成果</h1>
    </div>
    <div v-else>
      <div class="inner" v-for="(item, index) in list" :key="index">
        <res-detail :role="3" class="cd" :data="item"></res-detail>
      </div>
    </div>
  </div>
  <div class="right">
  </div>
</body>
</template>

<style scoped>
.main{
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: #22272E;
  .left{
    width: 70%;
    height: 100%;
    margin-right: 1rem;
    margin-left: 1rem;
    display: flow;
  }

  .right{
    margin-top: 1rem;
    width: 30%;
    height: 100%;

    .uI{
      margin-top: 1rem;
    }

    .tr{
      margin-top: 1rem;
    }
  }
}
.inner{
  padding: 2%;
  margin-top: 1%;
  border-radius: 10px;
  &:hover{
    background-color: #2D333B;
    transition: 0.5s;
  }
}
</style>